"use client";
import CategoryList from "@/components/CategoryList";
import Ranking from "@/components/Ranking";
import { Divider } from "antd";
import styles from "./page.module.css";
import Title from "antd/es/typography/Title";

export default function HomePage() {
    const handleLabelChange = (ids: {
        primaryId: string;
        categoryId: string;
        labelId: string;
    }) => {
        console.log("选中的分类和标签:", ids);
    };

    return (
        <div className={styles.container}>
            {/* 左侧主要内容区 */}
            <div className={styles.mainContent}>
                <div className={styles.section}>
                    <Title className={styles.goldTitle}>题目分类</Title>
                    <CategoryList onChangeLabel={handleLabelChange} />
                </div>

                <Divider className={styles.divider} />

                <div className={styles.section}>
                    <Title className={styles.goldTitle}>题目列表</Title>
                    <div className={styles.placeholder}>
                        题目列表内容将在这里显示
                    </div>
                </div>
            </div>

            {/* 右侧边栏区 */}
            <div className={styles.sidebar}>
                <div className={styles.section}>
                    <h2 className={styles.goldTitle}>Mew榜</h2>
                    <div className={styles.placeholder}>
                        <Ranking />
                    </div>
                </div>
            </div>
        </div>
    );
}
